<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>计算里程</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "dba528dcd7d571a231a330b532a6cf61",
        };
    </script>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=2.0&key=4fbb5ae31246fb4337678f7649c87b1b&plugin=AMap.Driving"></script>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <style type="text/css">
        #container {
            width: 885px;
            height: 500px;
            overflow: hidden;
        }

        .layui-form-item {
            margin-bottom: 0;
        }

        .layui-form-item {
            clear: both;
        }

        .layui-inline {
            margin-bottom: 5px;
            margin-right: 10px;
        }

        .layui-inline {
            vertical-align: middle;
        }

        .layui-inline {
            position: relative;
        }

        .layui-inline {
            display: inline-block;
        }

        .layui-input {
            display: block;
            width: 100%;
            padding-left: 10px;
        }

        .layui-input {
            height: 32px;
            line-height: 1.3;
            border-width: 1px;
            border-style: solid;
            background-color: #fff;
            border-radius: 2px;
        }

        .layui-btn {
            margin-left: 10px;
            transition: none;
        }

        .layui-btn {
            display: inline-block;
            height: 32px;
            line-height: 32px;
            background-color: #009688;
            color: #fff;
            white-space: nowrap;
            text-align: center;
            font-size: 12px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
        }

        .layui-field-title {
            border-width: 1px 0 0;
        }

        .layui-elem-field {
            padding: 0;
            border-style: solid;
        }

        fieldset {
            display: block;
            margin-inline-start: 2px;
            margin-inline-end: 2px;
            padding-block-start: 0.35em;
            padding-inline-start: 0.75em;
            padding-inline-end: 0.75em;
            padding-block-end: 0.625em;
            min-inline-size: min-content;
        }

        .layui-elem-field legend {
            margin-left: 20px;
            padding: 0 10px;
            font-size: 12px;
            font-weight: 600;
        }

        legend {
            display: block;
            padding-inline-start: 2px;
            padding-inline-end: 2px;
            border-width: initial;
            border-style: none;
            border-color: initial;
            border-image: initial;
        }
    </style>
</head>
<body>
<div class="layui-form-item">
    <div class="layui-inline">
        <input id="mileageTraveled" class="layui-input" type="text" placeholder="输入公里数"/>
    </div>
    <div class="layui-inline">
        <button id="confirm" type="button" class="layui-btn" onclick="confirm()">确定</button>
    </div>
    <div class="layui-inline">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;margin: 10px 0 0px;">
            <legend>公里数：<span id="mileageTraveleds">0</span></legend>
        </fieldset>
    </div>
    <div class="layui-inline">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;margin: 10px 0 0px;">
            <legend>时间：<span id="timetongxing">0</span>分钟</legend>
        </fieldset>
    </div>
</div>
<div id='container'></div>
</body>
<script type="text/javascript">
    function GetUrlByParamName(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var URL = decodeURI(window.location.search);
        var r = URL.substr(1).match(reg);
        if (r != null) {
            //decodeURI() 函数可对 encodeURI() 函数编码过的 URI 进行解码
            return decodeURI(r[2]);
        }
        ;
        return null;
    };

    $.ajax({
        url: '${ctxPath}/transportReceipt/findlist_transportSet',
        type: 'post',
        dataType: 'json',
        data: {"dispatchNumber": GetUrlByParamName("dispatchNumber")},
        success: function (data) {
            var list = data.data
            if (list.length > 0) {
                var setLongitude = ""
                var setLatitude = ""

                var getLongitude = ""
                var getLatitude = ""
                var waypoints = []
                for (var i = 0; i < list.length; i++) {
                    if (list[i].setLongitude == '' || list[i].setLongitude == null) {
                        alert(list[i].setUnit + "经纬度为空！计算失败");
                        return
                    }
                    if (list[i].getLongitude == '' || list[i].getLongitude == null) {
                        alert(list[i].getUnit + "经纬度为空！计算失败");
                        return
                    }
                    setLongitude = list[i].setLongitude
                    setLatitude = list[i].setLatitude
                    if (list.length == (i + 1)) {
                        getLongitude = list[i].getLongitude
                        getLatitude = list[i].getLatitude
                    } else {
                        waypoints.push([list[i].getLongitude, list[i].getLatitude]);
                    }
                }

                var map = new AMap.Map("container", {
                    viewMode: '2D',
                    zoom: 11,
                    resizeEnable: true
                });

                var drivingOption = {
                    policy: AMap.DrivingPolicy.LEAST_TIME,
                    ferry: 1,
                    map: map,
                }

                // 构造路线导航类
                var driving = new AMap.Driving(drivingOption)

                // 根据起终点经纬度规划驾车导航路线
                driving.search(new AMap.LngLat(setLongitude, setLatitude),
                    new AMap.LngLat(getLongitude, getLatitude), {
                        waypoints: waypoints
                    }, function (status, result) {
                        if (status === 'complete') {
                            // 获取路程和时间
                            var distance = result.routes[0].distance;
                            var distanceUnit = result.routes[0].distance_unit;
                            console.log("distance:" + distance + " distanceUnit:" + distanceUnit + " duration:" + duration)
                            var duration = Math.floor(result.routes[0].time / 60); // 时间转换为分钟

                            distance /= 1000; // 距离转换为公里

                            // 更新页面上的显示
                            document.getElementById("mileageTraveled").value = distance.toFixed(2);
                            document.getElementById("mileageTraveleds").textContent = distance.toFixed(2) + " 公里";
                            document.getElementById("timetongxing").textContent = duration + " 分钟";
                        } else {
                            console.error('获取驾车数据失败：' + result);
                        }
                    });
            }
        },
        error: function (data) {
            alert("查询收货客户经纬度异常!");
        }
    });

    function confirm() {
        parent.submit = 1
        parent.TDispatchInfoDlg.data.mileageTraveled = $("#mileageTraveled").val();//公里数
        var Index = parent.layer.getFrameIndex(window.name);
        parent.layer.close(Index);
    }
</script>
</html>
